<template>
  <div class="introduction-wrapper">
    <div class="js-intro elli-3">{{ellipsisIntro}}{{intro}}</div>
    <div class="js-hide-intro hide-intro">{{intro}}</div>
    <span class="bottom-icon">...</span>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      intro: {
        type: String
      }
    },
    computed: {
      ellipsisIntro () {
        let ellipsisIntro = this.intro;
        let el = this.$el;
        setTimeout(function () {
          console.dir(document.querySelector('.js-hide-intro').clientHeight);
        }, 0);
        console.dir(1);
        console.dir(el);
        console.log(ellipsisIntro);
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  .introduction-wrapper{
    padding: 15px;
    position: relative;
    .hide-intro{
      position: relative;
      top: -100%;
      left: -100%;
      visibility: hidden;
      z-index: -100;
    }
    .bottom-icon{
      position: absolute;
      width: 53px;
      height: 40px;
    }
  }
</style>
